<template>
  <div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">电力巡检系统 </el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/xianlus'}">线路管理</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/juese'}">新增线路</el-breadcrumb-item>
  </el-breadcrumb>
 <el-form :model="xianlu">
    <el-form-item label="线路编码" label-width="80px"><el-input v-model="xianlu.no"></el-input></el-form-item>
    <el-form-item label="线路名称" label-width="80px"><el-input  v-model="xianlu.name"></el-input></el-form-item>
    <el-form-item label="线路长度" label-width="80px"><el-input v-model="xianlu.xlong"></el-input ></el-form-item>
    <el-form-item label="回路长度" label-width="80px"><el-input v-model="xianlu.hlong"></el-input ></el-form-item>
    <el-form-item label="投运日期" label-width="80px">
      <el-date-picker v-model="xianlu.date"> </el-date-picker>
    </el-form-item>
    <el-form-item label="电压等级" label-width="80px">
      <el-input v-model="xianlu.dianya"></el-input>
    </el-form-item>
    <el-form-item label="起始杆号" label-width="80px">
      <el-input v-model="xianlu.start"></el-input>
      <el-button>选择杆塔</el-button>
    </el-form-item >
    <el-form-item label="终止杆号" label-width="80px">
      <el-input
       v-model="xianlu.stop"></el-input>
      <el-button @click="xuanze()">选择杆塔</el-button>
    </el-form-item>
    <el-form-item label="塔基数" label-width="80px">
      <el-input v-model="xianlu.tjiShu"></el-input>
    </el-form-item>
    <el-form-item label="备注" label-width="80px">
      <el-input type="textarea" v-model="xianlu.bz"></el-input>
    </el-form-item>
    <el-form-item label="是否启用" label-width="80px">
      <template>
        <el-radio v-model="xianlu.qiType" label="启用">启用</el-radio>
        <el-radio v-model="xianlu.qiType" label="未启用">未启用</el-radio>
      </template>
    </el-form-item>
    <el-form-item>
      <el-button @click="baocun()">保存</el-button>
      <el-button>返回</el-button>
    </el-form-item>
  </el-form>
<el-dialog title="选择杆塔" :visible="visible" @close="visible=false">
      <el-table :data="ganta" style="width: 300px;" >
      <el-table-column label="选择" >
        <template slot-scope='scope'>
           <el-radio v-model="scope.gantaId"></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="gantaId" label="杆塔号"></el-table-column>
      </el-table>
      <template slot="footer">
      	<el-button type="primary" @click="closeMe">确定</el-button>
      	<el-button type="info" @click="visible=false">取消</el-button>
      </template>
      </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default{
    data(){
      return{
      ganta:[],
      total:0,
      visible:false,
      ganta1:[],
      total1:[],
      xianlu:{
        no:'',
        name:'',
        xlong:'',
        hlong:'',
        date:'',
        dianya:'',
        start:'',
        stop:'',
        tjiShu:'',
        qiType:'启用'
      }

      }
    }
    ,methods:{
   getData:function(curpage,pagesize){
     axios.get('http://localhost:8081/dianlixunjian/ganta-by-page',{params:{
       curpage:curpage,
       pagesize:pagesize
     }}).then(vs=>{
       this.ganta=vs.data.list
       this.total=vs.data.total
       this.ganta1=vs.data.list
       this.total1=vs.data.total
     }).catch(err=>console.log(err))
   },
   baocun(){
     console.log(this.xianlu)
   }
   ,
   closeMe:function(){
     this.visible=false
     console.log(this.xianlu.stop)
   },
   xuanze:function(){
     this.visible=true;
     console.log(this.ganta)
   },
   handleSelectionChange:function(val){

    console.log(val)
   }
    },
    created:function(){
      this.getData(1,5)
    }
  }
</script>

<style scoped="scoped">
  .el-form {
    width: 400px;
    margin-left: 300px;
  }
</style>
